<section id="fcs-config">
  <div class="mlr-24">
    <hl-page-header title="系统配置-资源配置-配套设施">
      <hl-button size="mini" @on-click="newAdd">新增</hl-button>
    </hl-page-header>

    <div class="mt-15 box-i-shadow-1 br-4">
      <div class="clearfix border-b text-center color-gray dy-flex" style="margin:0 2px; line-height:40px;">
        <div class="dy-fx-1">序</div>
        <div class="dy-fx-2">名称</div>
        <div class="dy-fx-2">状态</div>
        <div class="dy-fx-2">默认配套</div>
        <div class="dy-fx-1">操作</div>
      </div>
      <div class="text-center">
        <ul class="clearfix contract-list-item dy-flex" style="line-height:40px;" v-for="(item, index) in data">
          <li class="dy-fx-1">{{index+1}}</li>
          <li class="dy-fx-2 ellipsis-1">
            <div v-if="!item.flag"><span class="mr-5">{{item.dictName}}</span><span class="icon-Gm-edit"
                @click="editshow(index)"></span></div>
            <div v-if="item.flag">
              <input type="text" class="form-control inline text-center mr-5" v-model="item.dictName"
                style="width: 140px;" @keyup.enter="editFcs(index)" />
              <span class="icon-Gm-confirm" @click="editFcs(index)"></span>
            </div>
          </li>
          <li class="dy-fx-2 ellipsis-1">{{item.status == 'Y' ? '启用' : '停用'}}</li>
          <li class="dy-fx-2 dy-flex" style="align-items: center;justify-content: center">
              <div class="switch" :class="item.defaultFlag == 'N'?'switch-off':'switch-on'" @click="editFcs(index)">
                <span class="yuan"></span>
              </div>
          </li>
          <li class="dy-fx-1">
            <a class="mr-5" @click="offOn(index)">{{item.status == 'Y' ? '停用' : '启用'}}</a>
            <a @click="delData(item.dictCode)">删除</a>
          </li>
        </ul>
        <ul class="clearfix contract-list-item dy-flex" style="line-height:40px;" v-for="(item, index) in newList">
          <li class="dy-fx-1">{{data.length < 10 ? '0' + (data.length+1) : (data.length+1)}}</li>
          <li class="dy-fx-2 ellipsis-1">
            <div>
              <input type="text" class="form-control inline text-center mr-5" v-model="item.name" style="width: 140px;"
                @keyup.enter="postAdd" />
              <span class="icon-Gm-confirm" @click="postAdd"></span>
            </div>
          </li>
          <li class="dy-fx-2 ellipsis-1">{{item.status == 'Y' ? '启用' : '停用'}}</li>
          <li class="dy-fx-2 dy-flex" style="align-items: center;justify-content: center;">
            <div class="switch switch-off">
              <span class="yuan"></span>
            </div>
          </li>
          <li class="dy-fx-1">
            <a @click="delListNew">删除</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<style media="screen">
  .switch {
    width: 30px;
    height: 17px;
    border-radius: 8.5px;
    padding: 0 2px;
  }

  .switch-on {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #565E99
  }

  .switch-off {
    display: flex;
    align-items: center;
    background: #D4D4D4
  }

  .yuan {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
  }
</style>

<script src="modules/system_config/scripts/fcs_config.js" charset="utf-8"></script>